<template>
  <div class='question-container'>
    <el-card class="questions-choice">
      <div class="btn_wrapper">
        <el-button class="el-icon-edit" type="success" @click="addNewQuestion">新增试题</el-button>
      </div>
      <!-- 搜索表单 -->
    <el-form ref="searchform"  label-width="70px" class="searchForm" :model="searchForm">
    <el-row :gutter="15">
  <el-col :span="6">
     <el-form-item label="学科" >
      <el-select  v-model="searchForm.subjectID" style="width:250px" @change="getSubjectDetail">
      <el-option
      v-for="item in subjects"
      :key="item.value"
      :value="item.value"
      :label="item.label"></el-option>
    </el-select>
      </el-form-item>
  </el-col>
  <el-col :span="6">
     <el-form-item label="二级目录">
      <el-select style="width:250px" v-model="searchForm.cataLogID">
      <el-option
      v-for="item in subjectDetail"
      :key="item.value"
      :value="item.value"
      :label="item.label"
      ></el-option>
    </el-select>
      </el-form-item>
  </el-col>
  <el-col :span="6">
     <el-form-item label="标签">
      <el-select style="width:250px" v-model="searchForm.tags">
      <el-option
      v-for="item in tagOptions"
      :key="item.value"
      :value="item.value"
      :label="item.label"
      ></el-option>
    </el-select>
      </el-form-item>
      </el-col>
  <el-col :span="6">
    <el-form-item label="关键字" >
      <el-input  style="width:230px" v-model="searchForm.keyword"></el-input>
      </el-form-item>
  </el-col>
    </el-row>
    <!-- 搜索表单第二行 -->
    <el-row :gutter="15">
  <el-col :span="6">
     <el-form-item label="试题类型">
      <el-select   style="width:250px" v-model="searchForm.questionType">
      <el-option
      v-for="item in questionType"
      :key="item.value"
      :value="item.value"
      :label="item.label"
      ></el-option>
    </el-select>
      </el-form-item>
  </el-col>
  <el-col :span="6">
     <el-form-item label="难度">
      <el-select  style="width:250px" v-model="searchForm.difficulty">
      <el-option
      v-for="item in difficulty"
      :key="item.value"
      :value="item.value"
      :label="item.label"
      ></el-option>
    </el-select>
      </el-form-item>
  </el-col>
  <el-col :span="6">
     <el-form-item label="方向">
      <el-select   style="width:250px" v-model="searchForm.direction">
      <el-option
      v-for="item in direction"
      :key="item"
      :value="item"
      ></el-option>
    </el-select>
      </el-form-item>
      </el-col>
  <el-col :span="6">
    <el-form-item label="录入人" >
    <el-select   style="width:230px" v-model="searchForm.creatorID">
      <el-option
      v-for="item in usersList"
      :key="item.id"
      :value="item.id"
      :label="item.username"
      ></el-option>
    </el-select>
      </el-form-item>
  </el-col>
    </el-row>
    <!-- 搜索表单第三行 -->
    <el-row :gutter="15">
  <el-col :span="6">
     <el-form-item label="试题备注">
      <el-input style="width:250px" v-model="searchForm.remarks"></el-input>
      </el-form-item>
  </el-col>
  <el-col :span="6">
     <el-form-item label="企业简称">
      <el-input style="width:250px" v-model="searchForm.shortName"></el-input>
      </el-form-item>
  </el-col>
  <el-col :span="7">
     <el-form-item label="城市">
      <el-select    style="width:120px" @change="chooseCity" v-model="searchForm.province">
      <el-option
      v-for="item in cityOptions"
      :key="item"
      :value="item"
      ></el-option>
    </el-select>
    <el-select   style="width:120px; margin-left:10px" v-model="searchForm.city">
      <el-option
      v-for="item in areaOptions"
      :key="item"
      :value="item"
      ></el-option>
    </el-select>
      </el-form-item>
      </el-col>
  <el-col :span="5">
    <el-form-item>
      <el-button style="margin-left:25px" @click="resetForm">清除</el-button>
      <el-button class="searchQuestion" @click="searchRes" type="primary">搜索</el-button>
    </el-form-item>
  </el-col>
    </el-row>
    </el-form>
    <!-- 标签页 -->
    <el-tabs v-model="searchForm.chkState" type="card" @tab-click="handleTabs">
  <el-alert
    :title="`数据一共有${total}条`"
    type="info"
    show-icon>
  </el-alert>
    <el-tab-pane label="全部" name="all"></el-tab-pane>
    <el-tab-pane label="待审核" name="0"></el-tab-pane>
    <el-tab-pane label="已审核" name="1"></el-tab-pane>
    <el-tab-pane label="已拒绝" name='2'></el-tab-pane>
  </el-tabs>
  <!-- 精选表格 -->

 <el-table
    :data="questions"
    border
    style="width: 100%">
    <el-table-column
      prop="number"
      label="试题编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="subject"
      label="学科目录"
      width="120">
    </el-table-column>
    <el-table-column
      label="题型"
      width="120">
       <template slot-scope="scope">
         {{questionType.find(item=>item.value===+scope.row.questionType).label}}
       </template>
    </el-table-column>
    <el-table-column
      label="题干"
      width="280">
      <template slot-scope="scope">
         <div v-html="scope.row.question"></div>
       </template>
    </el-table-column>
    <el-table-column
      label="录入时间"
      width="180">
      <template slot-scope="scope">
        <!-- parseTimeByString element中的方法 将时间转换成字符串 -->
        {{scope.row.addDate |parseTimeByString}}
      </template>
    </el-table-column>
    <el-table-column
      label="难度"
      width="120">
      <template slot-scope="scope">
        {{difficulty.find(item=>item.value===+scope.row.difficulty).label}}
      </template>
    </el-table-column>
    <el-table-column
      prop="creator"
      label="录入人"
      width="120">
    </el-table-column>
    <el-table-column
      label="审核状态"
      width="120">
      <template slot-scope="scope">
        {{scope.row.chkState|transformChkState}}
      </template>
    </el-table-column>
    <el-table-column
      prop="chkRemarks"
      label="审核意见"
      width="120">
    </el-table-column>
    <el-table-column
      prop="chkUser"
      label="审核人"
      width="120">
    </el-table-column>
    <el-table-column
      label="发布状态"
      width="120">
      <template slot-scope="scope">
        {{scope.row|transformPubState}}
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      align="center"
      width="200">
      <template slot-scope="scope">
        <el-button @click="questionsPreview(scope.row)" type="text" size="small">预览</el-button>
        <el-button @click="questionsCheck(scope.row)" type="text" size="small" :disabled="scope.row.chkState===1">审核</el-button>
        <el-button style="font-size: 12px;" type="text" :disabled="scope.row.publishState===1" @click="$router.push(`new?id=${scope.row.id}`)">修改</el-button>
        <el-button style="font-size: 12px;" type="text" @click="togglePublish(scope.row)">{{scope.row.publishState===1?'下架':'上架'}}</el-button>
        <el-button style="font-size: 12px;" type="text" :disabled="scope.row.publishState===1" @click="delQuestion(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
    <el-pagination
      style="margin-top:20px;text-align:right"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      >
    </el-pagination>
    </el-card>
    <!-- 题目预览 -->
     <questions-preview
     ref="questionPre"
     :dialogVisible.sync="dialogVisible"
     :questionInfo="questionInfo"
     ></questions-preview>
    <!-- 题目审核 -->
    <questions-check
    :checkDialog.sync="checkDialog"
    ref="questionCheck"
    :questionCheckData="questionInfo"
    @updateCheck="updateCheck"
    ></questions-check>
  </div>
</template>

<script>
import { simple as subjectList } from '@/api/hmmm/subjects.js'
import { simple as directoryList } from '@/api/hmmm/directorys.js'
import { simple as tagList } from '@/api/hmmm/tags'
import { questionType, difficulty, direction, publishType } from '@/api/hmmm/constants.js'
import { simple as userList } from '@/api/base/users.js'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys.js'
import { choice as questionList, choicePublish, remove as questionDel } from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
export default {
  components: { questionsPreview, QuestionsCheck },
  created () {
    this.getSubjects()
    this.getUserList()
    this.getlist()
  },
  data () {
    return {
      searchForm: {
        page: 1,
        pagesize: 5,
        subject: '',
        subjectID: null,
        cataLogID: null,
        tags: null,
        keyword: '',
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        chkState: 'all'
      },
      // 学科列表
      subjects: [],
      // 二级目录
      subjectDetail: [],
      // 下拉标签
      tagOptions: [],
      // 试题类型
      questionType,
      // 难度
      difficulty,
      // 方向
      direction,
      // 录入人
      usersList: [],
      // 发布状态
      publishType,
      // 所在城市
      cityOptions: getCity(),
      // 所在地区
      areaOptions: [],
      // 默认标签页
      activeName: 'all',
      // 题目列表
      questions: [],
      // 试题总数
      total: 0,
      // 题目预览对话框显示
      dialogVisible: false,
      // 题目详情
      questionInfo: {},
      // 题目审核对话框显示
      checkDialog: false
    }
  },
  filters: {
    transformChkState (val) {
      if (val === 0) return '待审核'
      if (val === 1) return '已审核'
      if (val === 2) return '已拒绝'
    },
    transformPubState (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      }
      if (row.publishState === 0 && row.chkState === 0) {
        return '已下架'
      }
      return '待发布'
    }
  },
  methods: {
    // 新增试题
    addNewQuestion () {
      this.$router.push('new')
    },
    // 获取学科信息
    async getSubjects () {
      const { data } = await subjectList()
      // console.log(data)
      this.subjects = data
    },
    // 获取用户列表
    async getUserList () {
      const { data: usersList } = await userList()
      // console.log(usersList)
      this.usersList = usersList
    },
    // 获取学科详细信息 二级目录
    async getSubjectDetail (subjectID) {
      this.searchForm.cataLogID = null
      this.searchForm.tags = null
      // console.log({ subjectId })
      if (subjectID) {
        // 获取目录
        const { data: subjectDetail } = await directoryList({ subjectID })
        // console.log(subjectDetail)
        this.subjectDetail = subjectDetail
        // 获取下拉标签
        const { data: tagArr } = await tagList({ subjectID })
        this.tagOptions = tagArr
      } else {
        this.subjectDetail = []
        this.tagOptions = []
      }
    },
    // 选择城市时确定地区
    chooseCity () {
      this.searchForm.city = null
      this.areaOptions = getArea(this.searchForm.province)
    },
    // 重置表单
    resetForm () {
      for (const k in this.searchForm) {
        if (k !== 'page' && k !== 'pagesize') {
          this.searchForm[k] = null
        }
      }
      this.getlist()
    },
    // 搜索结果
    searchRes () {
      this.searchForm.page = 1
      this.getlist()
    },
    // 获取表格
    async getlist () {
      const params = { ...this.searchForm }
      if (this.searchForm.chkState === 'all') params.chkState = null
      const { data } = await questionList(params)
      // console.log(data)
      this.questions = data.items
      this.total = data.counts
    },
    // 切换标签页
    handleTabs () {
      this.searchForm.page = 1
      this.getlist()
    },
    // 预览对话框
    questionsPreview (row) {
      this.dialogVisible = true
      this.questionInfo = row
      this.$nextTick(() => {
        this.$refs.questionPre.getDetail()
      })
    },
    // 审核对话框
    questionsCheck (row) {
      this.checkDialog = true
      // console.log(row)
      this.questionInfo = row
    },
    // 更新审核信息
    updateCheck () {
      this.getlist()
    },
    // 切换上架下架状态
    togglePublish (row) {
      this.$confirm(`是否确认${row.publishState === 1 ? '下架' : '上架'}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        row.publishState = row.publishState === 1 ? 0 : 1
        // console.log(row)
        await choicePublish(row)
        this.$message.success('操作成功')
        this.getlist()
      })
    },
    // 删除精选题目
    delQuestion (row) {
      this.$confirm('是否删除精选题目', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await questionDel(row)
        this.$message.success('删除成功')
        this.getlist()
      })
    },
    // 操作当前页数
    handleCurrentChange (val) {
      this.searchForm.page = val
      // 重新渲染页面
      this.getlist()
    },
    // 每页多少条
    handleSizeChange (val) {
      this.searchForm.page = 1
      this.searchForm.pagesize = val
      // 重新渲染页面
      this.getlist()
    }
  }
}
</script>

<style scoped lang='scss'>
// .questions-choice {
//   margin: 10px 10px ;
//   .el-icon-edit{
//     float: right;
//   }
//   .searchForm{
//     padding-top: 50px;
//   }
// }
  .searchQuestion{
    float: right;
    margin-right: 8px;
  }
.question-container {
  padding: 0 10px;
  margin: 10px 0;
}
.btn_wrapper {
  margin-bottom: 15px;
  text-align: right;
}
.fs{
  font-size: 12px;
}
</style>
